<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作物生长监测 - 苗情灾情监测系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/growth.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
</head>
<body>
    <main class="growth-container main-container">
        <!-- 左侧控制面板 -->
        <div class="sidebar">
            <div class="filter-section">
                <h3>监测区域选择</h3>
                <div class="filter-item">
                    <label>地块选择</label>
                    <select id="plotSelect">
                        <option value="all">全部地块</option>
                        <option value="plot1">A区水稻田 (2500亩)</option>
                        <option value="plot2">B区玉米地 (1800亩)</option>
                        <option value="plot3">C区小麦地 (1200亩)</option>
                    </select>
                    <div class="plot-info">
                        <span class="info-item">
                            <i class="fas fa-map-marker-alt"></i>
                            位置：东经114°, 北纬30°
                        </span>
                        <span class="info-item">
                            <i class="fas fa-calendar-alt"></i>
                            种植时间：2024-03-15
                        </span>
                    </div>
                </div>
                <div class="filter-item">
                    <label>作物品种</label>
                    <select id="cropType">
                        <option value="rice">水稻-南粳46</option>
                        <option value="corn">玉米-郑单958</option>
                        <option value="wheat">小麦-扬麦25</option>
                    </select>
                    <div class="crop-info">
                        <span class="info-item">
                            <i class="fas fa-clock"></i>
                            生长周期：120天
                        </span>
                    </div>
                </div>
                <div class="filter-item">
                    <label>生长阶段</label>
                    <select id="growthStage">
                        <option value="seeding">秧苗期</option>
                        <option value="tillering">分蘖期</option>
                        <option value="jointing">拔节期</option>
                        <option value="heading">抽穗期</option>
                        <option value="flowering">开花期</option>
                        <option value="mature">成熟期</option>
                    </select>
                    <div class="stage-tips">
                        <i class="fas fa-info-circle"></i>
                        <span class="stage-advice">当前阶段建议：注意控制水分，防止倒伏</span>
                    </div>
                </div>
            </div>

            <div class="action-section">
                <h3>快速操作</h3>
                <button class="btn-action" id="addRecord">
                    <i class="fas fa-plus"></i> 添加记录
                </button>
                <button class="btn-action" id="exportData">
                    <i class="fas fa-download"></i> 导出数据
                </button>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="content-area">
      

            <!-- 图表区域 -->
            <div class="charts-section">
                <div class="chart-card">
                    <div class="card-header">
                        <h3>生长趋势分析</h3>
                        <div class="card-actions">
                            <button class="btn-time active" data-range="week">周</button>
                            <button class="btn-time" data-range="month">月</button>
                            <button class="btn-time" data-range="season">季</button>
                        </div>
                    </div>
                    <div class="chart-content">
                        <div id="growthTrendChart" class="chart"></div>
                        <div class="chart-legend">
                            <div class="legend-item">
                                <span class="color-dot ndvi"></span>
                                <span>NDVI指数</span>
                            </div>
                            <div class="legend-item">
                                <span class="color-dot lai"></span>
                                <span>LAI指数</span>
                            </div>
                            <div class="legend-item">
                                <span class="color-dot height"></span>
                                <span>株高</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="chart-card">
                    <div class="card-header">
                        <h3>空间分布</h3>
                        <select class="metric-selector">
                            <option value="ndvi">NDVI分布</option>
                            <option value="lai">LAI分布</option>
                        </select>
                    </div>
                    <div id="distributionMap" class="map-container"></div>
                </div>
            </div>
        </div>

        <!-- 右侧信息面板 -->
        <div class="info-panel">
            <!-- 追肥建议 -->
            <div class="panel-card">
                <h3>追肥建议</h3>
                <div class="advice-content">
                    <div class="advice-item">
                        <div class="advice-icon">
                            <i class="fas fa-flask"></i>
                        </div>
                        <div class="advice-text">
                            <h4>施肥建议</h4>
                            <p class="fertilizer-advice">根据当前生长阶段，暂无追肥建议</p>
                        </div>
                    </div>
                    <div class="advice-item">
                        <div class="advice-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="advice-text">
                            <h4>最佳时间</h4>
                            <p class="timing-advice">请在清晨或傍晚进行施肥</p>
                        </div>
                    </div>
                    <div class="advice-item">
                        <div class="advice-icon">
                            <i class="fas fa-cloud"></i>
                        </div>
                        <div class="advice-text">
                            <h4>天气提醒</h4>
                            <p class="weather-advice">未来三天无降雨，适合施肥</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 风险预警 -->
            <div class="panel-card">
                <h3>风险预警 <span class="badge warning">2</span></h3>
                <div class="risk-list">
                    <div class="risk-item high">
                        <div class="risk-header">
                            <span class="risk-level">高风险</span>
                            <span class="risk-time">2024-03-20 10:30</span>
                        </div>
                        <div class="risk-content">
                            <h4>病虫害预警</h4>
                            <p>监测到A区水稻田可能存在稻飞虱感染风险，建议及时采取防治措施。</p>
                        </div>
                        <div class="risk-footer">
                            <button class="btn-text mark-handled" data-risk-id="${risk.id}">
                                <i class="fas fa-check"></i> 标记处理
                            </button>
                        </div>
                    </div>
                    <div class="risk-item medium">
                        <div class="risk-header">
                            <span class="risk-level">中风险</span>
                            <span class="risk-time">2024-03-19 16:45</span>
                        </div>
                        <div class="risk-content">
                            <h4>气象灾害预警</h4>
                            <p>未来48小时可能出现强降雨天气，建议做好排涝准备。</p>
                        </div>
                        <div class="risk-footer">
                            <button class="btn-text mark-handled" data-risk-id="${risk.id}">
                                <i class="fas fa-check"></i> 标记处理
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script src="js/components/navbar.js"></script>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="js/main.js"></script>
    <script src="js/growth.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            Navbar.init();
        });
    </script>

    <!-- 添加记录弹窗 -->
    <div class="modal" id="addRecordModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加监测记录</h3>
                <button class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <form id="recordForm">
                    <div class="form-group">
                        <label>监测时间</label>
                        <input type="datetime-local" id="recordTime" required>
                    </div>
                    <div class="form-group">
                        <label>NDVI指数</label>
                        <input type="number" id="ndviValue" step="0.01" min="0" max="1" required>
                    </div>
                    <div class="form-group">
                        <label>LAI指数</label>
                        <input type="number" id="laiValue" step="0.1" min="0" required>
                    </div>
                    <div class="form-group">
                        <label>株高(cm)</label>
                        <input type="number" id="heightValue" step="1" min="0" required>
                    </div>
                    <div class="form-group">
                        <label>备注</label>
                        <textarea id="recordNote" rows="3"></textarea>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn-primary">保存</button>
                        <button type="button" class="btn-secondary" id="cancelRecord">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html> 